<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
       <comp-a>
            <template v-slot:hello="data">
                <p>111</p>
                <p>{{ data.username }}</p>
            </template>
            <template v-slot:world="scope">
                <p>222</p>
                <p>{{ scope.age }}</p>
            </template>
       </comp-a>  

       <!-- <el-col>
            <template slot-scope="scope">
                <p>333</p>
                <p>{{ scope.age }}</p>
            </template>
       </el-col> -->

    </div>

    <template id="a">
        <div>
            <h3>组件A</h3>
            <!-- 定义插槽 -->
            <slot name="hello" :username="name" :sex="sex"></slot>
            <h3>组件A</h3>
            <!-- 定义插槽 -->
            <slot name="world" :age="age"></slot>
        </div>
    </template>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            name:'zhangsan'
        },
        components:{
            CompA:{
                template:'#a',
                data(){
                    return {
                        name:'tom',
                        age:20,
                        sex:'male'
                    }
                }
            }
        }
    })
</script>
</html>